import { Report } from "@/api/interface/iot";
import titleIcon from "@/assets/images/dashboard/icon-16.png";
import BaseChart from "@/components/Chart/BaseChart.vue";
import * as echarts from "echarts";
import { dayjs } from "element-plus";
import ItemBlock from "../components/item-block";
import { ComponentInternalInstance, getCurrentInstance } from "vue";
import "./right.scss";
export default defineComponent({
	emits: [],
	setup(props, { expose }) {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		let option = {
			tooltip: {
				trigger: "axis",
				formatter: "{b} <br/> {a}: {c} 台",
				axisPointer: {
					type: "shadow"
				}
			},
			toolbox: { show: false },
			legend: { show: false, left: 50, top: 10 },
			grid: {
				left: "3%",
				right: "5%",
				bottom: "3%",
				top: "20px",
				containLabel: true
			},
			xAxis: [
				{
					axisLabel: { rotate: 0, color: "#555" },
					boundaryGap: true,
					type: "category",
					data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
				}
			],
			yAxis: [
				{
					splitLine: { show: true, lineStyle: { color: "#e8e8e8" } },
					type: "value",
					axisLabel: {
						formatter: `{value} 台`,
						fontWeight: 500,
						color: "#555"
					}
				}
			],
			series: [
				{
					type: "line",
					smooth: true,
					name: "数量",
					// 折线图线条颜色
					lineStyle: {
						color: "#1fc4e3",
						width: 2
					},
					showSymbol: false,
					markPoint: { data: undefined },
					//区域图-背景
					areaStyle: {
						opacity: 1,
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{
								offset: 0, //底部
								color: "#a8e7fe99"
							},
							{
								offset: 1, //顶部
								color: "#a8e7fe10"
							}
						])
					},
					data: [] as any[]
				}
				// {
				// 	name: "Direct",
				// 	type: "bar",
				// 	itemStyle: {
				// 		color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
				// 			{ offset: 0, color: "#38cb80" },
				// 			{ offset: 1, color: "#1f97ff" }
				// 		])
				// 	},
				// 	emphasis: {
				// 		//鼠标移动上去高亮
				// 		focus: "series",
				// 		blurScope: "coordinateSystem",
				// 		itemStyle: {
				// 			color: "#38cb80"
				// 		}
				// 	},
				// 	data: [320, 332, 301, 334, 390, 330, 320]
				// }
			]
		};
		const chart = ref();
		const load = (res: any) => {
			let category: string[] = [];
			let seriesData: any[] = [];
			(res.result as Report.StatDataInfo[]).forEach(item => {
				category.push(dayjs(item.time).format("MM-DD"));
				seriesData.push(item.value);
			});
			option.xAxis[0].data = category;
			option.series[0].data = seriesData;
			chart.value.setChart(option);
		};
		const resize = () => {
			chart.value.resize();
		};
		expose({ resize, load });
		return () => {
			return (
				<ItemBlock
					class="surviva-device-chart"
					title={proxy?.$t("index.chart_title.surviva_device")}
					unit={proxy?.$t("index.chart_unit.set")}
				>
					{{
						titleIcon: () => {
							return <el-image src={titleIcon} fil="cover" />;
						},
						default: () => {
							return <BaseChart ref={chart} dateType="line" width="100%" height="100%" />;
						}
					}}
				</ItemBlock>
			);
		};
	}
});
